<template>
	<view class="uni_content">
		<tn-nav-bar fixed :backTitle="backTitle" :beforeBack="backClick">确定订单</tn-nav-bar>
		<view class="content" :style="{paddingTop: vuex_custom_bar_height + 5 + 'px'}">
			<view class="address_box">
				<span class="address_add">请新建收货地址</span>
				<text class="tn-icon-right address_right"></text>
			</view>
			<image src="@/pages/users/static/commodity/address.png" class="address_division"></image>

			<view class="order_content">
				<view>
					<view class="activity">距离活动仅剩：31天</view>
					<u-count-down
						ref="countDown"
						 class="activity countDown"
						:time="countDown"
						format="HH:mm:ss"
						autoStart
						millisecond
						@change="onChange"
					>
						<view class="time">
							<view class="time__custom">
								<text class="time__custom__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
							</view>
							<text class="time__doc">:</text>
							<view class="time__custom">
								<text class="time__custom__item">{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes }}</text>
							</view>
							<text class="time__doc">:</text>
							<view class="time__custom">
								<text class="time__custom__item">{{ timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds }}</text>
							</view>
						</view>
					</u-count-down>
				</view>
				<view class="order_details">
					<u-row justify="space-between" gutter="10">
						<u-col span="4">
							<image :src="productImg" class="product_img" />
						</u-col>
						<u-col span="8">
							<view class="order_title">佐赫ZH100奶牛牧场机械键盘有佐赫ZH100奶牛牧场机械键盘有</view>
							<view class="order_spe">
								<view class="order_spe_title">海盐 物车RGB-logo屏+清洁刷</view>
								<text class="tn-icon-down spe_right"></text>
							</view>
							<view class="order_price">
								<span class="price_symbol">￥</span>
								<span class="price_num">399</span>
								<u-number-box v-model="num" :min="1" class="price_number_box"></u-number-box>
							</view>
						</u-col>
					</u-row>
					<view class="order_other">
						<span>订单运费</span>
						<span class="order_other_right">包邮</span>
					</view>
					<view class="order_others">
						<span>优惠券</span>
						<text class="tn-icon-right others_right_icon"></text>
						<span class="others_right">优惠15元</span>
					</view>
					<view class="order_others">
						<span>星币兑换</span>
						<text class="tn-icon-right others_right_icon"></text>
						<span class="others_right">抵扣10元</span>
					</view>
					<view class="order_others">
						<span>留言</span>
						<span class="others_message_right">留言商家</span>
					</view>
				</view>
			</view>
		</view>
		<view class="release_bottom">
			<span>共1件，合计：</span>
			<span class="bottom_rmb">￥</span>
			<span class="bottom_number">399</span>
			<tn-button width="136px" height="40px" backgroundColor="#FE0000" fontColor="#FFFFFF" class="payment_button">去付款</tn-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			backTitle: '',
			countDown: 60 * 60 * 1000,
			timeData: {},
			productImg: 'https://img2.baidu.com/it/u=24804542,1057190557&fm=253&fmt=auto&app=120&f=JPEG?w=910&h=500',
			num: 1,
		}
	},
	methods: {
		backClick() {
			uni.navigateBack({
				delta: 1,
			})
		},
		onChange(e) {
			this.timeData = e
		},
	}
}
</script>

<style>
page {
	background-color: #F4F4F4;
}
</style>

<style lang="scss" scoped>
.content {
	padding: 4px 10px;
}
.address_box {
	width: 100%;
	min-height: 60px;
	background-color: #fff;
	margin-top: 10px;
	border-radius: 8px 8px 0 0;
}
.address_division {
	width: 100%;
	height: 3px;
	position: absolute;
	padding: 0 17px 0 0;
}
.address_add {
	line-height: 60px;
	padding: 23px 10px;
	color: #808080;
	font-size: 14px;
	font-weight: 600;
}
.address_right {
	float: right;
	font-size: 14px;
	color: #9CA3AF;
	line-height: 60px;
	margin-right: 10px;
}
.order_content {
	width: 100%;
	background-color: #fff;
	border-radius: 8px;
	padding: 12px 20px;
	margin-top: 14px;
	font-size: 14px;
	color: #1A1A1A;
}
/** 倒计时 **/
.time {
    @include flex;
    align-items: center;

    &__custom {
         margin-top: 4px;
         width: 22px;
         height: 22px;
         background-color: #FE0000;
         border-radius: 4px;
         /* #ifndef APP-NVUE */
         display: flex;
         /* #endif */
         justify-content: center;
         align-items: center;

        &__item {
             color: #fff;
             font-size: 12px;
             text-align: center;
         }
    }

    &__doc {
         color: #FE0000;
         padding: 0px 4px;
     }

    &__item {
         color: #606266;
         font-size: 15px;
         margin-right: 4px;
     }
}
.activity {
	float: left;
}
.countDown {
	margin-top: -5px;
	margin-left: 5px;
}
.order_details {
	clear: both;
	padding-top: 12px;
}
.product_img {
	border-radius: 5px;
	width: 90px;
	height: 90px;
}
.order_title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.order_spe {
	width: 100%;
	padding: 3px 6px;
	font-size: 12px;
	background-color: #F2F2F2;
	margin-top: 4px;
}
.order_spe_title {
	width: 85%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.spe_right {
	float: right;
	margin-top: -15px;
	color: #808080;
	font-size: 12px;
}
.order_price {
	margin-top: 16px;
}
.price_symbol {
	font-size: 12px;
	color: #000000;
	font-weight: bold;
}
.price_num {
	font-size: 20px;
	color: #000000;
	font-weight: bold;
}
.price_number_box {
	float: right;
	margin-top: -5px;
}
.order_other {
	margin-top: 20px;
	color: #1A1A1A;
	font-size: 14px;
	font-weight: 400;
}
.order_other_right {
	float: right;
	font-weight: 800;
}
.order_others {
	margin-top: 14px;
}
.others_right {
	float: right;
	font-size: 12px;
	color: #FE0000;
	margin-top: 4px;
}
.others_right_icon {
	color: #9CA3AF;
	float: right;
	font-size: 14px;
	margin-top: 6px;
	margin-left: 5px;
	margin-right: -5px;
}
.others_message_right {
	color: #9CA3AF;
	float: right;
	font-size: 12px;
	margin-top: 4px;
	margin-left: 5px;
	margin-right: -5px;
}

.release_bottom {
	width:100%;
	height: 70px;
	margin:0 auto;
	overflow:hidden;
	position: fixed;
	bottom:0;
	line-height: 70px;
	padding-left: 22px;
	font-size: 12px;
}
.payment_button {
	float: right;
	margin-top: 15px;
	margin-right: 14px;
}
.bottom_rmb {
	font-size: 14px;
	font-weight: 800;
}
.bottom_number {
	font-weight: 800;
	font-size: 20px;
}
</style>
